<style lang="less">
</style>
<template>
  <div>
    <Row>
      <Card>
        <p slot="title">
          {{pageName}}
        </p>
        <div slot="extra">
          <Button icon="md-add" type="primary" @click="addModdel">添加</Button>
          <Button icon="md-refresh"  @click="getExampleList">刷新</Button>
        </div>
        <Row class="margin-bottom-20" type="flex" justify="space-between" :gutter="16">
          <Col>
          <!-- 筛选内容 -->
          <Row :gutter="16" type="flex">
            <Col>
            <Input v-model="search.deviceId" placeholder="请输入要查找的设备id" clearable></Input>
            </Col>
            <Col>
            <Select v-model="search.notifyType" placeholder="请输入要查找的通知状态">
              <Option v-for="item in stateList" :value="item.value" :key="item.value">{{ item.label }}</Option>
            </Select>
            </Col>
            <Col>
            <Button icon="ios-search" type="primary" @click="savesearch">筛选</Button>
            <Button  @click="clearSearch" class="margin-left-10">查看全部</Button>
            </Col>
          </Row>
          </Col>
          <!-- <Col>
          <Button type="error" @click="delMultiple" class="margin-bottom-20">批量删除</Button>
          </Col> -->

        </Row>
        <Table  stripe border :data="exampleObj.list" :loading="exampleObj.loading" :columns="exampleObj.columns" ref="exampleList"></Table>
        <div class="pageWrap">
          <Page :total="exampleObj.count" :page-size="exampleObj.pageSize" show-total :current.sync="exampleObj.current" @on-change="pageChange" @on-page-size-change="pageSizeChange" show-sizer></Page>
        </div>
      </Card>
    </Row>
    <!-- 内容模块 -->
    <!-- <Modal v-model="exampleModal" :title="exampleObj.title" :mask-closable="false" :closable="false" >
      <Form :model="exampleForm" :label-width="120" ref="exampleForm" :rules="ruleValidate">
          <FormItem label="经度" prop="longitude">
            <Input v-model="exampleForm.longitude" number></Input>
          </FormItem>
      </Form>
      <div slot="footer">
        <Button type="primary"  @click="saveExample" v-if="exampleForm.ID">保存</Button>
        <Button type="primary"  @click="addExample" v-else>添加</Button>
        <Button   @click="formcancel('exampleForm','exampleModal')">取消</Button>
      </div>
    </Modal> -->
  </div>

</template>
<script>
import axios from "axios";
import util from "@/libs/util";
let exampleForm = {
  longitude: "", //经度
};
let search = {

};
export default {
  name: "example",
  components: {
  },
  data() {
    return {
      exampleModal: false,
      exampleForm: Object.assign({}, exampleForm),
      exampleObj: {
        list: [],
        columns: [
          // {
          //   type: "selection",
          //   width: 60,
          //   align: "center"
          // },
          {
            title: "所属单位",
            key: "companyname"
          },
          // {
          //   title: "手机",
          //   key: "mobile",
          //   render: (h, params) => {
          //     return h("span", params.row.mobile[0]);
          //   }
          // },
          {
            title: "操作",
            key: "action",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      
                      type: "primary"
                    },
                    style: {
                      marginRight: "10px"
                    },
                    on: {
                      click: () => {
                        this.getExample(params.row.ID);
                      }
                    }
                  },
                  "编辑"
                ), h(
                  "Poptip",
                  {
                    props: {
                      confirm: true,
                      title: "您确认删除该信息？",
                      transfer: true
                    },
                    on: {
                      "on-ok": () => {
                        this.delExample(params.row.ID);
                      }
                    }
                  },
                  [
                    h(
                      "Button",
                      {
                        props: {
                          type: "error",
                          size: "small"
                        }
                      },
                      "删除"
                    )
                  ]
                )
              ]);
            }
          },
        ],
        title: "",
        current: 1,
        count: 0,
        loading: true,
        pageSize: 10
      },
      ruleValidate: {
        longitude: [
          {
            required: true,
            message: "经度不能为空",
            trigger: "blur",
            type: "number"
          },
          {
            message: "必须是数字形式",
            trigger: "blur",
            type: "number"
          }
        ],
      },
      search: Object.assign({}, search),
    };
  },
  filters: {
  },
  computed: {
    pageName() {
      return util.getCurrentTitle(this)
    },
  },
  methods: {
    savesearch() {
      this.exampleObj.current = 1;
      this.getExampleList();
    },
    clearSearch() {
      this.search = Object.assign({}, search)
      this.savesearch();
    },
    formcancel(...params) {
      util.resetData(this, ...params);
    },
    addModdel() {
      this.exampleObj.title = "添加信息";
      this.exampleForm = Object.assign({}, exampleForm)
      this.exampleModal = true;
    },
    saveExample() {
      util.validateForm(this, 'exampleForm').then(res => {
        let temp = util.deepCopy(this.exampleForm);
        axios.put(`/admin/template/${temp.ID}`, temp).then(res => {
          // this.$Message.success("操作成功");
          this.formcancel("exampleForm", "exampleModal");
          this.getExampleList();
        });
      }).catch(err => {

      })

    },
    addExample() {
      util.validateForm(this, 'exampleForm').then(res => {
        let temp = util.deepCopy(this.exampleForm);
        axios.post(`/admin/template`, temp).then(res => {
          this.$Message.success("操作成功");
          this.formcancel("exampleForm", "exampleModal");
          this.getExampleList();
        });
      }).catch(err => {

      })
    },
    getExampleList() {
      // this.$store.commit('app/initSearch', {
      //   page: {
      //     current: this.exampleObj.current,
      //     pageSize: this.exampleObj.pageSize
      //   },
      //   search: this.search
      // });
      this.exampleObj.loading = true;
      axios
        .get(`/admin/examplelist`, {
          params: {
            page: this.exampleObj.current,
            size: this.exampleObj.pageSize
          }
        })
        .then(data => {
          this.exampleObj.list = data.Data;
          this.exampleObj.count = data.Count;
          this.exampleObj.loading = false;
        });
    },
    getExample(id) {
      axios.get(`/admin/template/${id}`).then(data => {
        this.exampleObj.title = "修改信息";
        this.exampleForm = data;
        this.exampleModal = true;
      });
    },
    delExample(id) {
      axios.delete(`/admin/template/${id}`).then(res => {
        this.$Message.success("操作成功");
        this.getExampleList();
      });
    },
    pageChange(v) {
      this.exampleObj.current = v;
      this.getExampleList();
    },
    pageSizeChange(v) {
      this.exampleObj.pageSize = v
      this.getExampleList();
    },
    // 需要刷新的内容
    refreshFn() {
      this.getExampleList();
    },
  },
  created() {
  },
  mounted() {
    //是否需要积累当前筛选状态
    // util.searchInit(this, 'exampleObj')
    this.getExampleList();
    //是否需要随时更新
    // util.initRefresh(this)
  }
};
</script>
